import React from 'react';

//注释了shouldComponentUpdate，用React.PureComponent
class Component extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      text: 'text',
    };
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //   if (this.state.text === nextState.text) {
  //     return false;
  //   }
  //   return true;
  // }

  // PureComponent
  componentDidMount() {
    console.log('Component componentDidMount');
    this.setState({
      text: 'mounted',
    });
    //每隔1秒更新text
    setInterval(() => {
      this.setState({
        text: 'mounted' + new Date()
      })
    })
  }

  render() {
    // console.log('Component Render', this.state.text);
    return (
      <p>
        count: {this.props.count} <br />
        text: {this.state.text}
      </p>
    );
  }
}

class Demo extends React.Component {
  state = {
    count: 0,
  };

  timer = 0;

  componentDidMount() {
    this.timer = setInterval(() => {
      console.log(`Demo setInterval run`);
      this.setState({
        count: this.state.count + 1,
      });
    }, 1000);
  }

  componentWillUnmount(){
    console.log('WillUnmount')
    clearTimeout(this.timer)
  }

  render() {
    
    return (
      <>
      <div>父组件 ：{this.state.count}</div>
      <Component count={this.state.count} />
    </>
    )
    
  }
}

export default Demo;
